import React from 'react';
import {Card, Button,Carousel} from "antd";

import './OtherCommon.less';
import ReactEcharts from "echarts-for-react";

const labelOption = {
  normal: {
    show: false,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
      name: {
        textBorderColor: '#fff'
      }
    }
  }
};

const option = {
  color: ['#3F90F7', '#FFBE00'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['经营累计增幅%', '人员增幅%']
  },
  toolbox: {
    show: false,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: {show: true},
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      axisTick: {show: false},
      data: ['公开', '暗标', '谈判', '询价', '磋商', '单一', '答疑', '接受委托', '非标项目']
    }
  ],
  yAxis: [
    {
      name: '增幅',
      type: 'value',
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value} %'
      },
      show: true
    }

  ],
  series: [
    {
      name: '经营累计增幅%',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      data: [20, 32, 1, 34, 39, 90, 22, 54, 30]
    },
    {
      name: '人员增幅%',
      type: 'bar',
      label: labelOption,
      data: [2, 3, 18, 34, 35, 35, 88, 30, 20]
    },
  ]
};

const data = [{id: '1001', title: '渭南市大荔县5000亩地出租'},
  {id: '1001', title: '渭南市大荔县5000亩地出租渭南市大荔县5000亩地出租'},
  {id: '1001', title: '渭南市大荔县5000亩地出租'},
  {id: '1001', title: '渭南市大荔县5000亩地出租'},
  {id: '1001', title: '渭南市大荔县5000亩地出租'},
  {id: '1001', title: '渭南市大荔县5000亩地出租'},
];


export default class OtherCommon extends React.Component {

  static defaultProps = {
    data: data,
  }

  render() {
    return (
      <div className="other-common flex-box  flex">
        <div className="flex-box  flex other-common-react-for-echarts">
          <Card title={"采购方式统计图"}>
            <Carousel vertical autoplay>
              <ReactEcharts
                option={option}
                className="other-common-react-for-echarts-svg"
              />
              <ReactEcharts
                option={option}
                className="other-common-react-for-echarts-svg"
              />

              <ReactEcharts
                option={option}
                className="other-common-react-for-echarts-svg"
              />

            </Carousel>

          </Card>
        </div>
        <div className="other-common-down-load">
          <Card title="常用下载" extra={<Button className='other-common-button'>更多</Button>}>
            {
              this.props.data.map((item, index) => {
                return (
                  <div className="other-common-item flex-box">
                    <div className="other-common-item-dot">
                      <span className="other-common-item-dot-text">{index<10?"0"+(index+1):index+""}</span>
                    </div>
                    <span
                      className="other-common-item-text">{item.title.length < 20 ? item.title : item.title.substring(0, 17) + '...'}</span>
                  </div>
                )
              })
            }

          </Card>
        </div>
      </div>
    )
  }
}
